<template>
	<!-- 发布信息 -->
	<view class="main-all">
		<view class="main-head">
			<view class="head-second">
				<image src="@/static/icon/search.png" @click="sousuo"></image>
				<input  confirm-type="search" v-model="searchValue" placeholder="输入船舶名称/航程/类型"/>
			</view>
			<view class="head-third" @click="sousuo">
				搜索
			</view>
			<view class="head-four" @click="goPagea">
				<image src="@/static/img/adds.png"></image>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="main-list">
			<view class="list-for" v-for="(tem,index) in shiplists">
				<view class="list-fitst">
					<image :src="tem.pic" class="img-second" @click="goPage(tem.id)"></image>
				</view>
				<view class="list-second" >
					<view class="list-name" @click="goPage(tem.id)">{{tem.cbbh}}</view>
					<view class="list-xq" @click="goPage(tem.id)">
						船东:{{tem.czxm}},长:{{tem.cc}}米,宽:{{tem.ck}}米,重:{{tem.zz}}吨
					</view>
					<view class="list-xq">
						<template v-if="tem.flag == 0 ">
							状态:
							<text class="list-zt">待审核</text>,
						</template>
						航程:{{tem.hxlx}},类型:{{tem.cx}}
					</view>
				</view>
				<view class="list-third">
					<image src="@/static/img/del.png" class="img-second" @click="isdelship(tem.id)"></image>
				</view>
			</view>
			<view style="text-align: center;font-size: 30upx;padding: 20upx 0;">不要扯了，没有数据了！</view>
		</view>
		<!-- 删除弹框 -->
		<uni-popup :show="isshowdel" position="middle" mode="fixed">
			<view class="popup-view">
				<view class="popup-third">您确定要删除吗？删除后无法恢复！</view>
				<view class="popup-button">
					<view @click="get_order(0)"><strong>取消</strong></view>
					<view @click="get_order(1)"><strong>确定</strong></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import { router, toast, localStorage } from '@/common/util.js';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import { secondmyships,secondmyshipinfo } from '@/service/getData.js';
	import { mapState, mapActions, mapMutations } from 'vuex';
	export default{
		components:{
			uniLoadMore
		},
		data() {
			return {
				searchValue: '', // 搜索的值
				shiplists:[] , // 数据列表
				isshowdel: false, // 是否显示删除弹出
				delid: '', //删除船的id
				dataList: []  //搜索的总数据
			}
		},
		onShow(){
			this.getshipdata();
		},
		
		computed: mapState(['userInfo', 'hasLogin']),
		methods:{
			    ...mapMutations(['GOPAGE_LOGIN', 'RECORD_USERINFO', 'LOGOUT', 'COMPANY_TEMP_UPDATA', 'SHIP_TEMP_UPDATA']),
				// 获取用户信息，进行页面跳转
			    getshipdata(){
					console.log("测试：" + JSON.stringify(this.userInfo) );
					let sent = {
						"type":"cbdalistbyuser",
						"uid":this.userInfo.uid,
						"cbid":"0",
						"key":this.searchValue
					};
					// console.log("数据传出"+JSON.stringify(sent));
					toast.loading();
					secondmyships({data:sent}).then(res => {
						toast.hideLoading();
						// console.log("数据返回"+JSON.stringify(res.data));
						var arr = eval('('+res.data+')');
						if(arr[0].stat == "1"){
							this.shiplists = arr[0].meslist;
							this.dataList = arr[0].meslist;
						}
					})
				},
				onNavigationBarButtonTap(e) { // 标题栏刷新按钮点击事件
				    toast.show('正在刷新');
					this.getshipdata();
				},
				goPagea(){
					router.navigateTo('/pages/sail/register/register?id='+'');
                 },
				sousuo(){
					var list = this.dataList;
					var keyWord = this.searchValue;
					var len = list.length;
					var arr = [];
					for(var i=0;i<len;i++){
						if(list[i].cbbh.indexOf(keyWord)>= 0 || list[i].czxm.indexOf(keyWord)>= 0 || list[i].cx.indexOf(keyWord)>= 0 || list[i].hxlx.indexOf(keyWord) >= 0){
						   arr.push(list[i]);
						}
					}
					this.shiplists = arr;
				},
				goPage(id) {
					router.navigateTo('/pages/sail/register/register?id='+id);
				},
				isdelship(id){
					this.delid = id;
					this.isshowdel = true;
				},
				// 确定删除
				get_order(num) {
					if(num == 1){
						toast.loading();
						let sent = {
							"type":"delcbdabyuser",
							"cbid":this.delid
						}
						secondmyshipinfo({data:sent}).then(res => {
							toast.hideLoading();
							var arr = eval('('+res.data+')');
							if(arr[0].stat == "1"){
								this.getshipdata();
							}
						})
					}
					this.isshowdel = false;
				} 
		}
	}
</script>

<style lang="scss">
	image{
		width: 40upx;
		height: 40upx;
	}
	.main-all{
		margin: 0;
		padding: 0;
		width: 100%;
		.main-head{
			display: flex;
			flex-direction: row;
			padding: 20upx 30upx;
			color: #5d5d5d;
			background-color: #ffffff;
			.head-second{
				border: 1upx solid #f4e7e7;
				padding: 14upx 20upx;
				border-radius: 50upx;
				background-color: #f4e7e7;
				width: 70%;
				display: flex;
				flex-direction: row;
				input{
					font-size: 30upx;
					margin-left: 20upx;
				}
			}
			.head-third{
				padding: 12upx 20upx;
				font-size: 34upx;
				color: #0091E6;
				border-radius: 10upx;
				position: absolute;
				right: 90upx;
			}
			.head-four{
				padding: 20upx;
				font-size: 35upx;
				position: absolute;
				right: 20upx;
			}
			.add{
				right: 160upx;
			}
		}
		.main-list{
			margin-top: 25upx;
			background-color: #ffffff;
			.list-for{
				display: flex;
				flex-direction: row;
				font-size: 30upx;
				padding:10upx 0;
				border-bottom: 1upx solid #bee9fc;
				.list-fitst{
					padding-left: 10upx;
					image{
						width: 200upx;
						height: 220upx;
					}
				}
				.list-second{
					padding: 10upx 0 10upx 10upx;
					.list-name{
						color: #007AFF;
						font-size: 35upx;
						padding: 10upx 0;
					}
					.list-xq{
						font-size: 24upx;
						color: #a1a1a1;
						padding: 10upx 0;
					}
					.list-zt{
						color: red;
					}
				}
				.list-third{
					position: absolute;
					right: 30upx;
					image{
						top: 20upx;
						width: 50upx;
						height: 50upx;
					}
				}
			}
		}
		.popup-view{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			width: 240px;
			text-align: center;
			padding-top: 20upx;
			.popup-third{
				font-size: 33upx;
				color: #000000;
			}
			.popup-button{
				display: flex;
				flex-direction: row;
				margin-top: 30upx;
				padding: 10upx 20upx 20upx 20upx;
				color: #007AFF;
				view:nth-child(1){
					position: absolute;
					right: 190upx;
					font-size: 33upx;
				}
				view:nth-child(2){
					position: absolute;
					right: 80upx;
					font-size: 33upx;
				}
			}
		}
	}
</style>
